<script setup lang="ts">
import { ref, toRef, onMounted, reactive } from "vue";
import { getList } from '@/api/index'
// import './gosun.css'
let objlist = { a: 0, b: 0, c: { d: 1, e: 2, f: { s: 2 } } }
//对象拉平
const goobj = function (ele: any) {
    let newobj = {};
    if (Object.prototype.toString.call(ele) != '[object Object]') return newobj
    dgfun(ele, newobj, '')
    console.log(ele)
    console.log(newobj)
    return newobj
}
const dgfun = function (oldObj: any, newObj: any, txt: string) {
    let text = ''
    if (txt != '') text = txt + '.'
    for (let key in oldObj) {
        if (Object.prototype.toString.call(oldObj[key]) != '[object Object]') {

            newObj[text + key] = oldObj[key]

        } else {
            dgfun(oldObj[key], newObj, text + key)
        }

    }

}
goobj(objlist)
let arr = [1, 2, 3, [4, 5, 6, [7, 8, [9, 10], 11, 12, [13]], 14], [15, 16, [17, [18]]], 19]
//数组拉平
const goArr = function (ele: any[], laver: number) {
    let newarr: any[] = [];
    if (Object.prototype.toString.call(ele) != '[object Array]') return newarr
    dgArrFun(ele, newarr, laver)
    return newarr
}
const dgArrFun = function (oldArr: any[], newArr: any[], laver: number) {
    if (laver <= 0) {
        for (let i = 0; i < oldArr.length; i++) {
            newArr.push(oldArr[i])
        }
    } else {
        for (let i = 0; i < oldArr.length; i++) {
            if (Object.prototype.toString.call(oldArr[i]) == '[object Array]') {
                dgArrFun(oldArr[i], newArr, laver - 1)
            } else {
                newArr.push(oldArr[i])
            }
        }

    }
}
let arrs = [1, 2, 3, [4, 5, 6, [7, 8, [9, 10], 11, 12, [13]], 14], [15, 16, [17, [18]]], 19];
//使用栈思维拉平数组
const goArrs = function (ele: any[], laver: number) {
    // 若传入的不是数组，直接返回空数组
    if (!Array.isArray(ele)) return [];
    let newArr = [];
    // 使用栈来模拟递归
    let stack = ele.map(item => ({ item, depth: 1 }));
    while (stack.length > 0) {
        // 从栈中取出一个元素
        // debugger
        let { item, depth } = stack.pop();
        if (Array.isArray(item) && depth <= laver) {
            // 将子数组元素压入栈中，并更新深度
            item.forEach(subItem => stack.push({ item: subItem, depth: depth + 1 }));
        } else {
            // 将非数组元素添加到结果数组
            newArr.push(item);
        }
    }

    return newArr;
};

console.log(arrs, goArrs(arrs, 10));
// console.log(arr,   goArr(arr,10))
//封装防抖和节流函数
let times: any = null
const goantiShake = function (fun: Function, time: number, type: string) {
    if (type == 'AS') {
        if (times) {
            clearTimeout(times)
            times = null
        }
        times = setTimeout(() => {
            fun()
            times = null
        }, time)
        return
    } else {
        if (!times) {
            times = setTimeout(() => {
                fun()
                times = null
            }, time)
        }
    }
}
const funs = function () {
    console.log(100)
}
// setInterval(()=>{
//     goantiShake(funs,2000,'dd')
// },900)
// goantiShake(funs,2000,'AS')
const dataList = ref<any[]>([])
const goGetList = async function () {
    try {
        let list = await getList()
        dataList.value = list?.data?.data
        console.log(list.data.data, 2555)
    } catch (ele) {
        console.log(ele)
    }
}
onMounted(() => {
    goGetList()
})

// 创建同时网络请求数组
const arrss:any[] = [];
for (let i = 0; i < 100; i++) {
    arrss.push(() => new Promise((resolve) => {
        setTimeout(() => {
            console.log('done', i);
            resolve(true);
        }, 100 * i);
    }));
};
//使用栈思维封装网络请求
// const parallelRun = () => {
//     const runingTask = new Map();
//     const inqueue = (totalTask, max) => {
//         while (runingTask.size < max && totalTask.length) {
//             const newTask = totalTask.shift();
//             const tempName = totalTask.length;
//             runingTask.set(tempName, newTask);
//             newTask().finally(() => {
//                 runingTask.delete(tempName);
//                 inqueue(totalTask, max);
//             });
//         }
//     }
//     return inqueue;
// };

// parallelRun()(arrss, 6);

// let datare = reactive({x:''})
// const dataFun = function(){
//     //不会失去响应式 但是添加多余属性无法删除
//       Object.assign(datare,{x:111,y:222})
//     setTimeout(()=>{
//         Object.assign(datare,{}) 
//         //vue3  删除对象多余属性 使用 原生 delete
//         delete(datare?.y)
//     },1000)
// }
// 手写深拷贝 对象 去除循环引用
 const  deepCloneWithCircular  =    function (target:any, map = new WeakMap()):any {
    if (typeof target!== 'object' || target === null) {
        return target;
    }
// 检查是否已经拷贝过该对象
    //建和值都是对象 判断对象已经拷贝
    if (map.has(target)) {
        return map.get(target);
    }
    let clone:any;
    if (Array.isArray(target)) {
        clone = [];
        map.set(target, clone);
        for (let i = 0; i < target.length; i++) {
            clone[i] = deepCloneWithCircular(target[i], map);
        }
    } else {
        clone = {};
        map.set(target, clone);
        for (let key in target) {
            if (target.hasOwnProperty(key)) {
                clone[key] = deepCloneWithCircular(target[key], map);
            }
        }
    }
    return clone;
}



const   thisfunction  =    function(){
   name:20;
   return function(){
//    console.log(this.name)   
   }

}
</script>


<template>
    <div>
        <div v-for="item in dataList" :key="item.shopId">{{ item.shopMsg }}</div>
        1111
    </div>
    <!-- <div>
        {{ datare }}<br/>
        <el-button @click="dataFun()">测试失去响应式</el-button>

    </div> -->
   <div className="blob-bg">
    <div className="blob-text">
        大家好我是111,欢迎来到我的博客
    </div>
</div>
</template>
<style scoped lang="scss">
</style>